<template>
  <div class="container">
    <el-form
      class="login-form"
      :model="loginForm"
      :rules="rules"
      ref="loginFormRef"
    >
      <h1 class="title1">Hello</h1>
      <h2 class="title2">欢迎登录</h2>
      <el-form-item prop="username">
        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          :prefix-icon="Lock"
          show-password
          v-model="loginForm.password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="login-btn"
          @click="login"
          :loading="loading"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import useUserStore from '@/store/modules/user'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { getTime } from '@/utils/time'

let loginForm = reactive({
  username: 'admin',
  password: '111111'
})
/* 超级管理员账号 admin 111111   拥有全部的菜单、按钮的权限
 * 飞行员账号  硅谷333  111111   不包含权限管理模块、按钮的权限并非全部按钮
*/

let loading = ref(false)

const userStore = useUserStore()
const $router = useRouter()
const $route = useRoute()

const loginFormRef = ref<FormInstance>()
const login = async () => {
  await loginFormRef.value?.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    await userStore
      .userLogin(loginForm)
      .then(() => {
        const redirect = $route.query.redirect as string
        if (redirect) {
          $router.push(redirect)
        } else {
          $router.push('/')
        }

        ElNotification({
          type: 'success',
          message: '欢迎回来',
          title: `HI，${getTime()}好`
        })
        loading.value = false
      })
      .catch((error) => {
        ElNotification({
          type: 'error',
          message: (error as Error).message
        })
        loading.value = false
      })
  })
}

const validatorUserName = (rule: any, value: any, callback: any) => {
  if (value.length < 5) {
    callback(new Error('用户名长度不能小于5'))
  } else {
    callback()
  }
}
const validatorPassword = (rule: any, value: any, callback: any) => {
  if (value.length < 6) {
    callback(new Error('密码长度不能小于6'))
  } else {
    callback()
  }
}
const rules = {
  username: [
    {
      trigger: 'change',
      validator: validatorUserName
    }
  ],
  password: [
    {
      trigger: 'change',
      validator: validatorPassword
    }
  ]
}
</script>
<script lang="ts">
export default {
  name: 'Login'
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  //   background: url(@/assets/imgs/login-bg.jpg) 0 0 no-repeat;
  //   background-size: cover;
  background-color: cadetblue;
  position: relative;
}
.login-form {
  width: 40%;
  //   background: url(@/assets/imgs/login-bg.jpg) 0 0 no-repeat;
  //   background-size: cover;
  background-color: bisque;
  position: absolute;
  left: 50%;
  top: 25vh;
  padding: 50px;
}
.title1 {
  font-size: 30px;
}
.title2 {
  font-size: 20px;
  margin: 20px 0;
}
.login-btn {
  width: 100%;
}
</style>
